const webpack  = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');
const extractTextPlugin = require('extract-text-webpack-plugin');
const extractCss = new extractTextPlugin('css/[name]/[hash]-style.css',{allChunks: true,});
const extractSass = new extractTextPlugin('css/[name]/[hash]-style-sass.css',{allChunks: true,});
const htmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');//清空dist


module.exports = {
    entry:'./src/app.js',//入口文件
    output: {
        filename: "[name]-[hash].bundle.js",//输出文件
        path: path.join(__dirname,'dist'),//输出位置
        publicPath: "/",//输出解析文件的目录，url 相对于 HTML 页面
    },
    module:{
        rules:[
            {
                test:/(\.jsx|.js)$/,
                use:['react-hot-loader/webpack',{
                    loader:'babel-loader',
                    options:{
                        presets:['es2015','react']
                    }
                }],
                exclude: /node_modules/
            },{
                test:/\.(png|jpg|gif)$/,
                use:[
                    {
                        loader:'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
                    }
                ]
            },{
                test:/\.css$/,
                use:extractCss.extract(
                    {
                        fallback:'style-loader',
                        use: [
                            {loader:'css-loader'},
                            {
                                loader:'postcss-loader',
                                options: {
                                    plugins: () =>[autoprefixer(
                                        {browsers:['ios >= 7','Android >=4.1',
                                                'last 10 Chrome versions ','last 10 Firefox versions',
                                                'Safari >= 6', 'ie > 8']
                                        }
                                    )]
                                }
                            }
                        ]
                    }
                )
            },{
                test:/\.scss$/,
                use:extractSass.extract({
                    fallback:'style-loader',
                    use:[
                        {
                            loader:'css-loader'
                        },{
                            loader: "postcss-loader",
                            options: {
                                plugins:() =>[autoprefixer(
                                    {browsers:['ios >= 7','Android >=4.1',
                                            'last 10 Chrome versions ','last 10 Firefox versions',
                                            'Safari >= 6', 'ie > 8']
                                    }
                                )]
                            },
                        },{
                            loader:'sass-loader'
                        }
                    ]
                })
            },{
                test:/\.(woff|woff2|svg|ttf|eot)($|\?)/i,
                use:[
                    {loader: "url-loader?limit=5000&name=font/[hash:8].[name].[ext]"}
                ]
            }
        ]
    },
    plugins:[
        extractCss,
        extractSass,
        new htmlWebpackPlugin({
            title:'index',
            template:'index.html',
            favicon:path.resolve(__dirname,'public/img/bitbug_favicon.ico')
        }),
        new CleanWebpackPlugin(['dist']),
    ]
}
